import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs
defaultValue="web"
groupId="platform"
values={[
{ label: 'React Router', value: 'web' },
{ label: 'NextJS', value: 'nextjs' },
{ label: 'Expo', value: 'expo' },
{ label: 'Antd Modal', value: 'antd' },
]}>

<TabItem value="web">

```tsx {9,11} title="Dashboard.tsx"
import { AsyncBoundary } from '@data-client/react';
import { Outlet } from 'react-router';

export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <section>
        <AsyncBoundary>
          <Outlet />
        </AsyncBoundary>
      </section>
    </div>
  );
}
```

</TabItem>
<TabItem value="nextjs">

```tsx {12} title="app/dashboard/layout.tsx"
import { AsyncBoundary } from '@data-client/react';

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div>
      <h1>Dashboard</h1>
      <section>
        <AsyncBoundary>{children}</AsyncBoundary>
      </section>
    </div>
  );
}
```

</TabItem>
<TabItem value="expo">

```tsx {15,17} title="app/dashboard/_layout.tsx"
import { AsyncBoundary } from '@data-client/react';
import { Slot } from 'expo-router';

export default function DashboardLayout() {
  return (
    <ParallaxScrollView
      headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
      headerImage={
        <Image
          source={require('@/assets/images/my-logo.png')}
          style={styles.logo}
        />
      }
    >
      <AsyncBoundary>
        <Slot />
      </AsyncBoundary>
    </ParallaxScrollView>
  );
}
```

</TabItem>

<TabItem value="antd">

```tsx title="ModalOpen.tsx"
import { AsyncBoundary } from '@data-client/react';
import { Button, Modal } from 'antd';

export default function ModalOpen() {
  return (
    <>
      <Button type="primary" onClick={showModal}>
        Open Modal
      </Button>
      <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        // highlight-next-line
        <AsyncBoundary>
          <MyModalBody />
        // highlight-next-line
        </AsyncBoundary>
      </Modal>
    </>
  );
}
```

</TabItem>

</Tabs>